<template>
    <div>
        <!-- 左对齐 -->
        <van-row type="flex" :style="{'background-color': tempEngine.back}">
            <van-col span="6">
                <upload :img="tempEngine.img" :boxClass="boxClass" />
            </van-col>
            <van-col span="15">
                <div class="icon" @click="setHex" v-show="isEdit">
                    <i class="iconfont ali-setting"></i>
                </div>
                <van-notice-bar style="margin-top: -2px" :style="{'height': tempEngine.img.grid.height + 'px'}" color="#909399" :background="tempEngine.back" text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。" />
            </van-col>
            <van-col span="2" >
                <span @click="openLink(tempEngine.img.link)">更多</span>
            </van-col>
        </van-row>

        <van-row type="flex" justify="center">
            <van-col span="20">
                <van-panel title="HEX设置" v-show="hex.show">
                    <van-field v-model="tempEngine.back" clearable label="Hex" placeholder="请输入" />
                    <br>
                    <div slot="footer">
                        <van-button size="small" @click="setClick">确定</van-button>
                    </div>
                </van-panel>
            </van-col>
        </van-row>
    </div>
</template>
<script>
import upload from '@/components/readyUpload'
import dingMApi from '@/utils/dingMApi'
import { mapGetters } from 'vuex'
export default {
    components: { upload },
    computed: {
        ...mapGetters(['isEdit']),
    },
    data() {
        return {
            boxClass: {
                div: { padding: '10px' },
                icon: { 'font-size': '15px', color: '#C0C4CC' }
            },
            hex: {
                show: false
            }
        }
    },
    props: {
        tempEngine: {
            type: Object,
            default() { }
        }
    },
    methods: {
        async openLink(link) {//是否工作台， 判断上传还是 跳转
            if (this.isEdit) {
                await this.upload();
            } else {
                await dingMApi[link.type](link.val)
            }
        },
        setHex() {
            this.hex.show = true;
        },
        setClick() {
            this.hex.show = false;
        }
    }
}
</script>
<style lang="scss" scoped>
span {
    line-height: 27px;
    font-size: 13px;
    color: #909399;
}

.icon {
    position: absolute;
    width: 32px;
    height: 32px;
    background-color: #909399;
    z-index: 100;
    margin-top: -2px;
}

.ali-setting {
    color: #FFF;
    font-size: 30px;
}
</style>
